<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>蜗牛车辆预约</title>
        <meta name="description" content="蜗牛车辆预约">
        <meta name="keywords" content="蜗牛车辆预约">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/style.css">
        <style>
            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }
            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }
        </style>
    </head>
    <body class="hold-transition">
    <div id="app">
        <div class="content-header">
            <h1>车辆管理<small>车辆列表</small></h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>车辆管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="app-container">
            <div class="box">
                <div class="filter-container">
                    <el-form :inline="true">
                        <el-input placeholder="车辆名称/车辆特点" v-model="queryCarDTO.title" style="width: 200px;" class="filter-item"></el-input>
                        <el-form-item label="车辆类型:">
                            <el-select v-model="queryCarDTO.energy" clearable @change="initData()">
                                <el-option label="汽油" value="1"></el-option>
                                <el-option label="新能源" value="2"></el-option>
                                <el-option label="混合动力" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="创建时间:">
                            <el-date-picker
                                    v-model="dateRange"
                                    value-format="yyyy-MM-dd"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>

                        <el-button type="primary" icon="el-icon-search" @click="initData">查询</el-button>
                        <el-button type="default" @click="resetQueryCarDTO">清空</el-button>
                        <el-button type="primary" class="butT" @click="handleToAdd">新增</el-button>
                    </el-form>
                </div>
                <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                    <el-table-column type="index" align="center" label="序号"></el-table-column>
                    <el-table-column prop="title" label="车辆名称" align="center"></el-table-column>
                    <el-table-column prop="energy" label="能源类型" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.energy == '1'">汽油</span>
                            <span v-if="scope.row.energy == '2'">新能源</span>
                            <span v-if="scope.row.energy == '3'">混合动力</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="imgUrl" label="车辆图片" align="center">
                        <template slot-scope="scope">
                            <img :src="scope.row.imgUrl" height="50px" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="日租价格" align="center"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
                    <el-table-column prop="isShow" label="是否显示" align="center">
                        <template slot-scope="scope">
                            <el-switch
                                    style="display: block"
                                    v-model="scope.row.isShow"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    active-text="不显示"
                                    inactive-text="显示"
                                    :active-value="'0'"
                                    :inactive-value="'1'"
                                    @change="handleChangeShow($event, scope.row.id)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="handleToEdit(scope.row.id)" >编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)" >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[1, 2, 3, 4]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>

                <!-- 新增标签弹层 -->
                <div class="add-form">
                    <el-dialog title="新增车辆" :visible.sync="addDialogFormVisible" :close-on-click-modal="false" >
                        <el-form label-position="right" label-width="100px" :rules="rules" :model="car" ref="addOrEditForm">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="车辆名称" prop="title">
                                        <el-input v-model="car.title" placeholder="请输入车辆名称"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="车辆类型" prop="typeId">
                                        <el-select v-model="car.typeId">
                                            <el-option
                                                    v-for="carType in carTypes"
                                                    :key="carType.id"
                                                    :label="carType.name"
                                                    :value="carType.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="能源类型">
                                        <el-select v-model="car.energy">
                                            <el-option label="汽油" value="1"></el-option>
                                            <el-option label="新能源" value="2"></el-option>
                                            <el-option label="混合动力" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="品牌">
                                        <el-select v-model="car.brandId">
                                            <el-option
                                                    v-for="brand in brands"
                                                    :key="brand.id"
                                                    :label="brand.name"
                                                    :value="brand.id">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="变速箱">
                                        <el-input v-model="car.speedBox" placeholder="请输入变速箱类型"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="车辆动力">
                                        <el-input v-model="car.power" placeholder="请输入车辆动力"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="车辆座位">
                                        <el-input v-model="car.seat" placeholder="请输入车辆座位"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="油箱容量">
                                        <el-input v-model="car.tank" placeholder="请输入油箱容量"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="日租价格">
                                        <el-input v-model="car.price" placeholder="请输入日租价格"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="车辆特点">
                                        <el-input v-model="car.feature" placeholder="请输入车辆特点"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="显示" prop="isShow">
                                        <template>
                                            <el-radio v-model="car.isShow" label="0">否</el-radio>
                                            <el-radio v-model="car.isShow" label="1">是</el-radio>
                                        </template>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="新车">
                                        <template>
                                            <el-radio v-model="car.isNew" label="0">否</el-radio>
                                            <el-radio v-model="car.isNew" label="1">是</el-radio>
                                        </template>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="热租">
                                        <template>
                                            <el-radio v-model="car.isHot" label="0">否</el-radio>
                                            <el-radio v-model="car.isHot" label="1">是</el-radio>
                                        </template>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="车辆图片">
                                        <el-upload
                                                class="avatar-uploader"
                                                action="/upload/img/"
                                                :show-file-list="false"
                                                :on-success="handleAvatarSuccess"
                                                :before-upload="beforeAvatarUpload">
                                            <img v-if="car.imgUrl" :src="car.imgUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="addDialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="handleAddOrEdit()">确定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
    </body>
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                dataList: [],                       // 分页数据
                car: {},                            // 表单数据
                addDialogFormVisible: false,        // 新增表单是否可见
            },
            // vue对象初始化之后执行的钩子函数
            created(){
                // 分页查询数据
                this.initData();
            }
        })
    </script>
</html>
